
<!DOCTYPE html>
<html lang="zh-CN ">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>micro coder || Hello World</title>
    <meta name="author" content="micro coder">
    <meta name="description" content="一篇简单的技术博客 ">
    <meta name="keywords" content=" ">
    <link rel="icon" href="/images/headPhoto.jpg">
    <link rel="stylesheet" href="/css/antd.min.css">
    
    <link rel="stylesheet" href="/css/night-theme.css">
    
    <script src="/js/vue.js"></script>
    <script src="/js/antd.min.js"></script>
<meta name="generator" content="Hexo 6.3.0"></head>

<body>

    <div id="loading"
        style="height: 100vh; width: 100%; position: fixed;display: flex;z-index: 200; justify-content: space-between;">
        <div id="loadleft" style="width: 50%;background-color: #ffffff;transition: width 0.6s ease-out;"></div>
        <div id="loadright" style="width: 50%;background-color: #ffffff;transition: width 0.6s ease-out;"></div>
        <div
            style="position: fixed; height: 100vh; width: 100%;display: flex;justify-content: center;align-items: center;">
            <div id="loadcontent"
                style="width:400px;height:400px;padding:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:solid 10px#a3ddfb; text-align:center;opacity:1;transition:opacity 0.3s ease-out;">
                <div>
                    <h2>LOADING...</h2>
                    <p>加载过慢请开启缓存(浏览器默认开启)</p>
                    <div>
                        <img src="/dancingkitty.gif" alt="loading">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="layout">
        <transition name="into">
            <div v-show="show_page" style="display: none;">
                <div id="menu_show">
                     
<nav id="menu">
    <div class="desktop-menu">
        <a href="/">
            <span class="title">micro coder</span>
        </a>
        
        <a href="/">
            <span>
                <a-icon type="home" theme="filled" />
            </span>
            <span>home</span>
        </a>
        
        <a href="/about">
            <span>
                <a-icon type="idcard" theme="filled" />
            </span>
            <span>about</span>
        </a>
        
        <a href="/archives">
            <span>
                <a-icon type="folder" theme="filled" />
            </span>
            <span>archives</span>
        </a>
        
        <a href="/like/categories">
            <span>
                <a-icon type="book" theme="filled" />
            </span>
            <span>categories</span>
        </a>
        
        <a href="/like/tags">
            <span>
                <a-icon type="tags" theme="filled" />
            </span>
            <span>tags</span>
        </a>
        
        <a target="_blank" rel="noopener" href="https://en.korilin.com">
            <span>
                <a-icon type="compass" theme="filled" />
            </span>
            <span>英文博客</span>
        </a>
        
    </div>

    <div :class="'phone-menu ' + menu_show" id="phone-menu">
        <div :class="'title'" @click="menu_show=!menu_show">
            <span style="margin-right: 10px;">
                <a-icon type="appstore" theme="filled" />
            </span>
            <span>micro coder</span>
        </div>
        <div class="items" v-show="menu_show">
            
            <a href="/">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="home" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">home</div>
                </div>
            </a>
            
            <a href="/about">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="idcard" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">about</div>
                </div>
            </a>
            
            <a href="/archives">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="folder" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">archives</div>
                </div>
            </a>
            
            <a href="/like/categories">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="book" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">categories</div>
                </div>
            </a>
            
            <a href="/like/tags">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="tags" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">tags</div>
                </div>
            </a>
            
            <a target="_blank" rel="noopener" href="https://en.korilin.com">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="compass" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">英文博客</div>
                </div>
            </a>
            
        </div>
        <div class="curtain" v-show="menu_show"></div>
    </div>

</nav>
                </div>

                <div id="main">
                     
<link rel="stylesheet" href="/css/post-body.css">
<div class="article">
    <div>
        <h1>Hello World </h1>
    </div>
    <div class="info">
        <span class="date">
            <span class="icon">
                <a-icon type="calendar" theme="filled" />
            </span>
            2023/7/30
        </span>

        

        
    </div>

    <div class="content" v-pre>
        <p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre><code class="bash">$ hexo new &quot;My New Post&quot;
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre><code class="bash">$ hexo server
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre><code class="bash">$ hexo generate
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre><code class="bash">$ hexo deploy
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>

    </div>

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <div id="comment">
        <div id="gitalk-container">
        </div>
    </div>
    
</div>
                     
<footer id="footer">
    <div class="footer-wrap">
        <div>
            © 2023 - 2023 micro coder
            <span class="footer-icon">
                <a-icon type="flag" theme="filled" /></span>
            @micro coder
        </div>
        <div></div>
        <div>Based on the <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo Engine</a> & <a
                target="_blank" rel="noopener" href="https://github.com/korilin/hexo-theme-particle">Particle Theme</a></div>
        
    </div>

</footer>

<script src="/js/highlight.min.js"></script>
<script src="/js/particle.js"></script>
                </div>
            </div>
        </transition>
    </div>

    <script>
    new Vue({
        el: "#layout",
        data: {
            show_page: false,
            onload_menu: false,
            menu_show: false,
            card_top: 100
        },
        created: function () {
            var that = this
            window.onload = function () {
                that.show_page = true
                document.getElementById("loadcontent").style.opacity = 0
                setTimeout(function () {
                    document.getElementById("loadleft").style.width = 0
                    document.getElementById("loadright").style.width = 0
                }, 300)
                setTimeout(function () {
                    document.getElementById("loading").style = "display:none"
                }, 600)
            }
        },
        mounted: function () {
            var that = this
            window.addEventListener('scroll', function (e) {
                that.menu_show = false
            })
        },
        methods: {
            home_click: function () {
                window.scrollTo({
                    top: window.innerHeight - 80,
                    behavior: "smooth",
                });
            }
        }
    })
</script>

<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
    const gitalk = new Gitalk({
        clientID: '',
        clientSecret: '',
        repo: 'hexo-theme-particle',      // The repository of store comments,
        owner: 'korilin',
        admin: ['korilin'],
        language: 'en',
        id: location.pathname,      // Ensure uniqueness and length less than 50
        distractionFreeMode: true  // Facebook-like distraction free mode
    })
    gitalk.render('gitalk-container')
</script>

</body>

</html>